<template>
	<div class="home">
		<div class="bannerBox">
			<div class="content">
				<div class="block">
					<el-carousel>
						<el-carousel-item v-for="(item, idx) in bannerData" :key="idx">
							<img :src="item.img"  :class="'bgcolor'+idx">
						</el-carousel-item>
					</el-carousel>
				</div>
			</div>
		</div>
		<div class="indexNav">
			<div class="content">
				<div>
					<ul class="navTitle">
						<li v-for="(item, idx) in navData" :key="idx" @click="toHomeDetail(idx)"
							:class="{ active: numb == idx }"> {{ item.title }}</li>
					</ul>
				</div>
				<span>修改兴趣</span>
			</div>
		</div>
		<div class="mainContent">
			<div class="content">
				<router-view name="ZrzV"></router-view>
				<div class="allCourses">
					<a href="/">查看全部课程<em>&nbsp;></em> </a>
				</div>
			</div>

		</div>
		<div class="homeHot">
			<div class="content">
				<h1>热门知识</h1>
				<ul>
					<li v-for="(item, idx) in hotData" :key="idx" @click="toHotDetail(idx)" :class="{ active: num == idx }">
						{{ item.title }}</li>
				</ul>
				<menu-list :data="hotMenuData"></menu-list>
			</div>
		</div>
	</div>
</template>

<script>
import { getHotNav, getHomeNav ,getBannerData ,getHotData} from "@/api"
import menuList from '@/components/MenuList.vue'
export default {
	name: 'HomeIndex',
	data() {
		return {
			bannerData:[],
			navData:[],
			hotData:[],
			hotMenuData: [],      //底部二级导航
			hotNavData: [],
			num: 0,
			numb: 0,
			activeName: 'second'
		}
	},
	components: {
		menuList
	},
	created() {
		getHotNav().then(res => {      //得到底部的二级导航数据
			this.hotNavData = res.data.data
			this.hotMenuData = this.hotNavData[0].children
		}),
		getHomeNav().then(res=>{
			this.navData=res.data
		}),
		getBannerData().then(res=>{
			this.bannerData=res.data
		}),
		getHotData().then(res=>{
			this.hotData=res.data
		})
	},
	
	mounted() {
		this.$router.push({ name: 'homedetail', params: { id: '1' } }).catch(err => { })
	},
	methods: {
		toHomeDetail(idx) {    //
			this.numb = idx
			this.$router.push({
				name: this.navData[idx].href,
				params: { id: this.navData[idx].id, title: this.navData[idx].title }
			}).catch(err => { })
		},
		toHotDetail(idx) {
			this.num = idx;
			this.hotMenuData = this.hotNavData[idx].children
		},
		handleClick(tab, event) {
			console.log(tab, event);
		}
	},

}
</script>

<style lang="less" scoped>
.home {
	.active {
		color: #23b8ff;
		border-bottom: 4px solid #23b8ff;
	}

	.el-tabs__nav-wrap::after {
		background-color: #fff;
	}

	.content {

		width: 1200px;
		margin: 0 auto;
	}

	.bannerBox {
		background-color: #4B84F8;

		.block {
			margin: 0 auto;
			width: 800px;

			img {
				background-color: #333;
				width: 710px;
			}
		}
	}

	.indexNav {
		border-bottom: 1px solid #ccc;
		margin-bottom: 25px;

		.content {
			text-align: center;

			div {
				display: inline-block;

				.navTitle {
					display: flex;
					font-size: 20px;
					margin: 0 auto;
					text-align: center;

					li {
						cursor: pointer;
						padding: 16px 12px;
					}
				}

			}

			span {
				cursor: pointer;
				float: right;
				padding: 3px 10px;
				border: 1px solid #666;
				color: #666;
				margin-top: 20px;
			}

		}
	}

	.mainContent {
		.allCourses {
			border: 5px solid #ccc;
			text-align: center;
			margin-bottom: 55px;

			a {
				line-height: 60px;
				// text-align: center;
				font-size: 18px;
				color: #333;
				cursor: pointer;
				text-decoration: none;

				&:hover {
					color: #23b8ff;
				}

				em {
					font-size: 20px;
				}
			}
		}
	}

	.homeHot {

		h1 {
			margin-bottom: 34px;
			text-align: center;
			font-size: 30px;
			font-weight: 400;
		}

		ul {
			display: flex;
			flex-wrap: wrap;
			border-bottom: 1px solid #eee;

			li {
				// border: 1px solid black;
				font-size: 20px;
				margin: 0 70px 4px 0;
				cursor: pointer;
				padding: 5px;
			}
		}

	}
}
</style>
